﻿<template>

  <div>
    <template v-loading="isLoading">


      <el-tabs v-model="currentTemplateType" tab-position="left" @tab-click="changeTab" :style="{height:pageHeight-10+'px'}">
        <el-tab-pane v-for="type in templateTypeList" v-if="hasPermission(type,'view')" :label="type.name" :name="type.id">

          <custom-field-form :data="queryCondition" :fields="queryFields" columns="8">
            <div style="float: left;">
              <el-button type="primary" size="small"  @click="loadTemplateList(type.id)">查询</el-button>
              <el-button
                  v-if="hasPermission(type,'create')"
                  type="success"
                  size="small"
                  @click="openCreateTemplateDlg()">添加
              </el-button>
            </div>
          </custom-field-form>
          <el-table id="templateList" :max-height="pageHeight-35" :data="templateList" border highlight-current-row
                    empty-text="暂无数据" v-loading="isLoading" row-key="id"
                    :header-cell-style="{background:'#f5f7fa'}">

            <el-table-column type="index" label="序号" show-overflow-tooltip width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="模板名称" header-align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="tag" label="产品类型" header-align="center"  show-overflow-tooltip>
              <template slot-scope="item">
                {{item.row.tag == 'oil'?'原油':'天然气'}}
              </template>
            </el-table-column>
            <el-table-column prop="publish" label="是否发布"
                             header-align="center">
              <template slot-scope="item">
                {{item.row.publish?'是':'否'}}
              </template>
            </el-table-column>
            <el-table-column prop="publishTime" label="发布时间" width="170" header-align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="170" header-align="center">
            </el-table-column>
            <el-table-column label="操作"
              align="center" width="300">

              <template slot-scope="scope">
                <template v-if="!scope.row.publish&&hasPermission(type,'update')">
                  <el-button
                    size="mini"
                    @click="openPage('/system/template-info',scope.row.id,{pageType:$route.query.pageType,readonly:false})">编辑
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="publish(scope.row.id)">发布
                  </el-button>
                  <el-button
                    v-if="hasPermission(type,'delete')"
                    size="mini"
                    type="danger"
                    @click="deleteTemplate(scope.row.id)">删除
                  </el-button>
                </template>
                <template v-else>
                  <el-button
                      size="mini"
                      @click="openPage('/system/template-info',scope.row.id,{pageType:$route.query.pageType,readonly:true})">查看
                  </el-button>

                </template>
                <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.publish && hasPermission(type,'update')"
                    @click="cancelPublish(scope.row.id)"
                >取消发布
                </el-button>
                <el-button
                  v-if="hasPermission(type,'create')"
                           size="mini"
                           @click="openCreateTemplateDlg(scope.row.id)">复制
                </el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-dialog title="模板信息" :visible.sync="templateDlgVisible" :close-on-click-modal="false">
      <el-form :model="template">
        <el-row>
          <el-col span="12">
        <el-form-item label="模板名称" :label-width="formLabelWidth">
          <el-input v-model="template.name" autocomplete="off" placeholder="请输入指标展示名称">
          </el-input>
        </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="产品类型" :label-width="formLabelWidth">
            <meta-select  type="product-type" v-model="template.tag"></meta-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注信息" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="template.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="templateDlgVisible = false">取 消</el-button>
        <!--        <el-button type="primary" v-if="editInputFieldMode" @click="updateInputField">更 新</el-button>-->
        <el-button type="primary" @click="createTemplate">创 建</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>
    import MetaSelect from "../../components/meta-select";
    export default {
        name: "TemplateList",
      components: {MetaSelect},
      props: {
            pageHeight: {type: Number, default: 500}
        },
      $$route:{
        meta:{
          title:'模板管理'
        }
      },
        data() {
            return {
              pageType: '',
              queryCondition:{},
                queryFields:[
                  {
                    id: 'name',
                    name: '名称',
                    colSpan: 5
                  },
                ],
                isLoading: true,
                formLabelWidth: '120px',
                computeTreeData: [],
                template: {sheetNameList: []},
                templateDataConfig: {},
                sheetConfigMap: {},
                cellDataOption: {},
                cellLinkDataDlgVisible: false,
                globalSettingDlgVisible: false,
                sheetSettingDlgVisible: false,
                sumTypeList: [],
                computeUnitList: [],
                computeUnitMap: [],
                sensAnalysisItemList: [],
                showSheetIcon: false,
                templateTypeList: [],
                templateList: [],
                templateDlgVisible: false,
                currentTemplateType: '',
                templateTagList: [],
            }
        },
        computed: {},
        created: function () {

        },
        mounted() {
            const type = this.$route.query.type;
            if(type) {
                this.currentTemplateType = type;
            }
          if (this.$route.query.pageType && this.$route.query.pageType.length > 0) {
            this.pageType = this.$route.query.pageType;
            /*if(this.pageType=="export"){
              this.$route.meta.title = "导出模板管理";
            }else if(this.pageType=="batch_export"){
              this.$route.meta.title = "批量导出模板";
            }else if(this.pageType=="merge_export"){
              this.$route.meta.title = "合并导出模板";
            }*/
          }
            this.loadtemplateTypeList();
        },
        methods: {
          hasPermission(type,permission) {
            if (type.id == 'system') {
             return this.checkPermission('system_template:'+permission)
            } else {
              return this.checkPermission('template:'+permission)
            }
          },
            changeTab(data) {
                this.loadTemplateList(data.name);
            },
            loadtemplateTypeList: function () {
                this.$get("/template/type/list", {}, (data) => {
                    this.templateTypeList = data.data;
                    // let map = {};
                    let validTemplateType = false;
                    for (let i = 0; i < this.templateTypeList.length; i++) {
                        if(this.currentTemplateType&&this.currentTemplateType==this.templateTypeList[i].id){
                            validTemplateType = true;
                        }
                    }
                    if(!validTemplateType) {
                        this.currentTemplateType = this.templateTypeList[0].id;

                    }
                    this.loadTemplateList(this.currentTemplateType);
                });


            },
            loadTemplateList: function (type) {
                this.isLoading = true;
                this.queryCondition.type=type;
                this.queryCondition.exportTemplateType= this.pageType;
                let url=this.$ctx+'/#'+this.$route.fullPath;
                if(!url.includes("&type")){
                  url = this.$ctx+'/#'+this.$route.fullPath+'&type='+type;
                }
                history.pushState(null,null,url)
                this.$get("/template/data", this.queryCondition, (data) => {
                    this.templateList = data.data;

                }, () => {
                    this.isLoading = false;
                });
            },
            createTemplate: function () {
                let errorMsg = '';
                if (!this.template.name || this.template.name == '') {
                    //单元名称为空，提示输入单元名称
                    errorMsg = '请先输入指标名称';
                }
                if (errorMsg.length > 0) {
                    this.$message({
                        message: errorMsg,
                        type: 'warning'
                    });
                    return;
                }
              const loading = this.openLoading();
                this.template.type = this.currentTemplateType;
                this.template.exportTemplateType = this.pageType;
                this.$post("/template/created", this.template, (response) => {
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    this.templateDlgVisible = false;

                }, () => {
                    this.loadTemplateList(this.currentTemplateType);
                    loading.close()
                });
            },
          cancelPublish(id) {
            this.$confirm('模板取消发布后将不可使用该模板，是否取消?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$post("/template/cancelPublish", {id:id}, (response) => {
                this.$message({
                  message: '取消发布成功',
                  type: 'success'
                });

              }, () => {
                this.loadTemplateList(this.currentTemplateType);
              });
            }).catch(() => {
              //点击取消删除按钮的操作
            });
          },
            publish: function (id) {

                this.$confirm('模板发布后将不可修改，是否发布?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/template/publish", {id:id}, (response) => {
                        this.$message({
                            message: '发布成功',
                            type: 'success'
                        });

                    }, () => {
                        this.loadTemplateList(this.currentTemplateType);
                    });
                }).catch(() => {
                    //点击取消删除按钮的操作
                });

            },
            deleteTemplate: function (id) {

                this.$confirm('删除后不可恢复，确定将该模板删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                  const loading = this.openLoading();
                    this.$post("/template/delete", {id:id}, (response) => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });

                    }, () => {
                        this.loadTemplateList(this.currentTemplateType);
                      loading.close();
                    });
                }).catch(() => {
                    //点击取消删除按钮的操作
                });

            },

            openCreateTemplateDlg: function (sourceId) {
                this.template = {sourceId:sourceId};
                this.templateDlgVisible = true;

            },

        },

    }
</script>
